<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 5000px;
            height: 5000px;
        }
    </style>
</head>
<body>

    <script>
        // 给 window对象绑定事件 window对象就是事件源
        // scroll 是 事件类型 
        // function(){} 是 事件处理函数 也就是触发事件时执行的程序
        window.addEventListener( 'scroll' , function(){
            // 没有文档类型声明
            // var scrollTop = document.body.scrollTop;
            // console.log( scrollTop );

            // var scrollLeft = document.body.scrollLeft;
            // console.log( scrollLeft );

            // 有文档类型声明
            // var scrollTop = document.documentElement.scrollTop;
            // console.log( scrollTop );

            // var scrollLeft = document.documentElement.scrollLeft;
            // console.log( scrollLeft );

            // 兼容处理  逻辑赋值 
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
            var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; 
            console.log( scrollTop , scrollLeft );
        })

    </script>

    <script>
        /*
            页面滚动
                1,  页面滚动监听事件

                    window.addEventListener( 'scroll' , function(){})
                        给 window 对象 绑定 事件 
                        window对象 就是 绑定事件的对象 称为 事件源

                        scroll 是 事件类型 页面滚动监听事件

                        function(){} 是触发事件时 执行的函数程序 称为 事件处理函数

                2,  获取 页面滚动的距离

                    document.documentElement.scrollTop
                        上卷距离
                    document.documentElement.scrollLeft
                        左移距离

                3,  必须注意
                    (1), 一次滚动一般不会只触发一次程序的执行
                    (2), 兼容性
                        有文档类型声明 
                            document.documentElement.scrollTop
                            document.documentElement.scrollLeft

                        没有文档类型声明
                            document.body.scrollTop
                            document.body.scrollLeft

            兼容性处理方式
                1,  获取不到数据 获取数据的结果是 0 
                    逻辑赋值 

                2,  函数方法没有
                    if判断 执行不同的函数方法
        
        */
    </script>
</body>
</html>